<template>
  <div>
      <div class = "sousuo">
        用户姓名: <i-input v-model="username" placeholder="请输入..." style="width: 300px"></i-input>

        手机号: <i-input v-model="phone" placeholder="请输入..." style="width: 300px"></i-input>
        <i-button type="primary" shape="circle" icon="ios-search" @click="getListInfo"></i-button>
      </div>
      <Row class="body">
        <i-col span="3">用户编号</i-col>
        <i-col span="3">姓名</i-col>
        <i-col span="3">电话</i-col>
        <i-col span="2">用户余额</i-col>
        <i-col span="4">用户等级</i-col>
        <i-col span="2">查看pos</i-col>
        <i-col span="4">创建时间</i-col>
        <i-col span="3">操作</i-col>
      </Row>

      <Row class="list" v-for="item of userList" :key="item.name">
        <i-col span="3">{{item.userId===''?'-':item.userId}} </i-col>
        <i-col span="3">{{item.username===''?'-':item.username}}</i-col>
        <i-col span="3">{{item.phone===''?'-':item.phone}}</i-col>
        <i-col span="2">{{item.userBonus===''?'-':item.userBonus}}</i-col>
        <i-col span="4">
          <select v-model="item.level" style="width:150px">
              <option v-for="item of levelList" :value="item.value" :key="item.value">
                {{item.label}}
              </option>
          </select>
        </i-col>
        <i-col span="2">
          <router-link target="_blank" :to="{path:'userPos',query:{userId:item.userId}}">
            <i-button type="info" size="small">查看</i-button>
          </router-link>
        </i-col>
        <i-col span="4">{{item.createTime}}&nbsp;</i-col>
        <i-col span="3">
          <i-button type="info" size="small"  @click="handleUpdateManager(item.phone,item.level)">修改</i-button>|
          <i-button type="error" size="small"  @click="handleDelManager(item.userId,item.phone)">删除</i-button>
        </i-col>
      </Row>

    <div class="page">
      <Page :total="total" :page-size="pageSize" @on-change="handlePage"></Page>
    </div>
  </div>

</template>

<script>
import axios from 'axios'
export default {
  name: 'UserList',
  data () {
    return {
        pageSize:10,
        pageNumber:1,
        total:0,
        userList:'',
        self: this,
        username:'',
        phone:'',
        levelList: [
          {
              value: '0',
              label: '普通用户 '
          },
          {
              value: '9',
              label: '合伙人'
          },
          {
              value: '1',
              label: '银牌代理'
          },
          {
              value: '2',
              label: '金牌代理'
          },
          {
              value: '3',
              label: '钻石代理'
          }
        ],
      }
  },
  methods: {
    getListInfo () {
      axios.post('/web/api/user/users',{"pageSize":this.pageSize,"pageNumber":this.pageNumber,"username":this.username,"phone":this.phone}).then(this.getListInfoSucc)
    },
    getListInfoSucc (res) {
      console.log('tag', res)
      this.total = res.data.date.total
      this.userList = res.data.date.list
    },
    handlePage (res){
      axios.post('/web/api/user/users',{"pageSize":this.pageSize,"pageNumber":res}).then(this.getListInfoSucc)
    },
    handleUpdateManager (phone,level) {
      axios.post('/web/api/manager/initPartner',{"phone":phone,"level":level}).then(this.updateInfoSucc)
    },
    updateInfoSucc (res) {
      console.log('修改', res)
      this.$Message.success(res.data.message)
      this.getListInfo();
    },
    handleDelManager(userId,phone){
      this.$Message.success("用户是"+userId+phone)
    },
    showPosLost(userId){
      alert(userId);
      let routeUrl = this.$router.resolve({
          path: "/userPos",
          query: {id:userId}
     });
      window.open(routeUrl, '_blank')
    }
  },
  mounted () {
    this.getListInfo();
  }
}
</script>
<style lang="stylus" scoped>
  .body
    width: 100%
    line-height 3
    font-size 14px
    color #2680c4
    background #eff3fa
    text-align center
  .list
    line-height 3
    font-size 14px
    text-align center
    color #2680c4
  .sousuo
    width 100%
    text-align center
    margin-top 2rem
    margin-bottom 2rem
  .page
    width 100%
    margin-top 2rem
    text-align center
</style>

